<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Section scroller one-page template</title>
    <meta name="description" content="This one page example has a fixed navbar and full page height sections. Each section is vertically centered on larger screens, and then stack responsively on smaller screens. Scrollspy is used to activate the current menu item. This layout also has a contact form example. Uses animate.css, FontAwesome, Google Fonts (Lato and Bitter) and Bootstrap." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Codeply">



    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body >
    <nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="text-danger" href="#" style="padding-right:20px"><img src="images/logo.png" height="50"/></a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">Product</a></li>
                <li><a href="#section3">Overview</a></li>
                <li><a href="#section4">Contact</a></li>
                <li><a href="#section5">Team</a></li>
                <li>&nbsp;</li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-heart-o fa-lg"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

<section class="container-fluid" id="section1">
    <div class="v-center">
        <h1 class="text-center">Always Stay Connected</h1>
        <h2 class="text-center lato animate slideInDown">One device to always do the things you love without losing connectivity</h2>
        <p class="text-center">
            <br>
            <a href="#section4" class="btn btn-danger btn-lg btn-huge lato">Learn More</a>
        </p>
    </div>
    <a href="#section2">
		<div class="scroll-down bounceInDown animated">
            <span>
                <i class="fa fa-angle-down fa-2x"></i>
            </span>
		</div>
        </a>
</section>

<section class="container-fluid" id="section2">
    <div class="container v-center">
        <div class="row">
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="panel panel-default slideInLeft animate">
                            <div class="panel-heading">
                            <h3>Robust</h3></div>
                            <div class="panel-body">
                                <div class="text-left explanation">
                                    <ul>
                                        <li>Intelligent diverse WAN link aggregation, failover and redundancy</li>
                                        <li>Firewall and Security</li>
                                        <li>Enterprise class 11 a/b/g/n/ac WiFi Access Point</li>
                                    </ul>
                                </div>
                                <hr>
                                <a href="#section4" class="btn btn-danger btn-sm lato">Learn More</a>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 text-center">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="panel panel-default slideInUp animate">
                            <div class="panel-heading">
                            <h3>Simple</h3></div>
                            <div class="panel-body">
                                <div class="text-left explanation">
                                    <ul>
                                        <li>Easy to setup</li>
                                        <li>Hosted Applications</li>
                                    </ul>
                                </div>
                                <hr>
                                <a href="#section4" class="btn btn-danger btn-sm lato">Learn More</a>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 text-center">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="panel panel-default slideInRight animate">
                            <div class="panel-heading">
                            <h3>Hosted</h3></div>
                            <div class="panel-body">
                                <div class="text-left explanation">
                                    <ul>
                                        <li>Cloud Based Management and REST API</li>
                                        <li>Cloud Based DDNS service</li>
                                        <li>Cloud Based VPN service, Remote Access to connected devices</li>
                                    </ul>
                                </div>
                                <hr>
                                <a href="#section4" class="btn btn-danger btn-sm lato">Learn More</a>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/row-->
        <div class="row">
            <br>
        </div>
    </div>
    <!--/container-->
</section>

<section>
    <div class="container-fluid v-center">
        <div class="row">
            <div class="col-sm-2 col-sm-offset-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 col-sm-offset-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
            <div class="col-sm-2 col-xs-6">
                <div class="text-center">
                    <a href="">
                        <img style="width:100px;" class="img-circle img-responsive img-thumbnail" src="http://placehold.it/100/444">
                    </a>
                    <h3 class="text-center"></h3>
                </div>
            </div>
        </div>
        <!--/row-->
    </div>
</section>

<section class="container-fluid" id="section3">
    <h1 class="text-center">Overview</h1>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <h3 class="text-center lato slideInUp animate">Here is a simple overview of the product</h3>
            <br>
            <p class="text-center">
                <img src="images/overview.png" class="img-responsive thumbnail center-block ">
            </p>
        </div>
    </div>
</section>

<section id="section4">
    <div class="container v-center">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Sounds Interesting?</h1>
                <h3 class="text-center">Drop us a line and let us send you a wealth of information on our product</h3>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                <div class="row form-group">
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
                    </div>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-5">
                        <input type="email" class="form-control" name="email" placeholder="Email" required="">
                    </div>
                    <div class="col-sm-5">
                        <input type="email" class="form-control" name="phone" placeholder="Phone" required="">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-10">
                        <input type="homepage" class="form-control" placeholder="Website URL" required="">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-10">
                        <button class="btn btn-primary btn-lg pull-right">Contact Us</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 pull-right">
                <address>
                  <strong>AptiWiz</strong><br>
                  43575 Mission Boulevard, #418<br>
                  Fremont, CA, United States 94539<br>
                </address>
                <address>
                  <strong>Email</strong><br>
                  <a href="mailto:info@aptiwiz.com">info@aptiwiz.com</a><br><br>
                  <strong>Call</strong><br>
                  (510) 493 7729
                </address>
            </div>
        </div>
    </div>
</section>

<section class="container-fluid" id="section5">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <h2 class="text-center lato">Meet our team</h2>
            <hr>
            <div class="media">
                <h3>Ramesh Siripurapu</h3>
                <div class="media-left">
                    <img src="http://placehold.it/100/62c462/ffffff&text=R">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus lobortis nisl sit amet blandit. Curabitur ac viverra magna. Nullam hendrerit lobortis magna sed pellentesque. Duis convallis porttitor sem vitae gravida. Suspendisse feugiat nisl ut neque hendrerit hendrerit. Cras at velit sed velit blandit venenatis vitae sed eros. Aenean facilisis rutrum vehicula. Nulla efficitur lacinia eros.</p>
                </div>
            </div>
            <hr>
            <div class="media">
                <h3>Jack Bauer</h3>
                <div class="media-body media-middle">
                    <p>Mauris pellentesque vitae leo nec tempor. Nulla et justo ac purus pharetra ultrices. Aliquam molestie mauris eget ultricies condimentum. Curabitur venenatis bibendum purus at sagittis. Praesent bibendum sagittis nisi sit amet sagittis. Aliquam vel justo neque. Praesent pellentesque, orci nec rutrum luctus, leo est.</p>
                </div>
                <div class="media-right">
                    <img src="http://placehold.it/100/ee5f5b/ffffff&text=U">
                </div>
            </div>
            <hr>
            <div class="media">
                <h3>Gena Meyers</h3>
                <div class="media-left">
                    <img src="http://placehold.it/100/f0ad4e/ffffff&text=G">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec aliquam justo. Nunc tincidunt ex metus, eget pretium lorem rutrum vel. Vestibulum gravida, tortor sed feugiat tristique, risus justo accumsan velit, commodo elementum leo risus eget dui. Duis hendrerit efficitur urna et pulvinar. Cras eu enim lorem. Suspendisse rhoncus tellus vulputate scelerisque efficitur. </p>
                </div>
            </div>
            <hr>
            <div class="media">
                <h3>Nielsen Peck</h3>
                <div class="media-body media-middle">
                    <p>Proin varius felis ac dolor suscipit rhoncus. Nunc tincidunt felis ac faucibus scelerisque. Donec hendrerit libero ut egestas viverra. Donec sit amet ipsum egestas, accumsan arcu in, feugiat nisi. Sed scelerisque, nisl eget porta consequat, metus lectus cursus felis, a tincidunt ligula libero eu metus. Phasellus sodales egestas lacus, eget finibus lectus bibendum in.</p>
                </div>
                <div class="media-right">
                    <img src="http://placehold.it/100/5bc0de/ffffff&text=N">
                </div>
            </div>
            <hr>
            <div class="media">
                <h3>Susan Mcdonald</h3>
                <div class="media-left">
                    <img src="http://placehold.it/100/337ab7/ffffff&text=S">
                </div>
                <div class="media-body media-middle">
                    <p>Duis dui sem, iaculis non consequat rhoncus, rhoncus euismod odio. Maecenas laoreet tincidunt nulla, scelerisque suscipit turpis vestibulum eget. Vivamus ut ultricies magna. Pellentesque fermentum est sagittis, pulvinar nunc vel, pellentesque ipsum. Sed pretium purus nec ipsum auctor molestie. Vivamus volutpat arcu non eros rhoncus, in vestibulum sapien laoreet</p>
                </div>
            </div>

        </div>
    </div>
</section>

<!--
<section class="container-fluid" id="section6">
    <ul class="row list-unstyled">
        <li class="col-md-6 col-md-offset-1 col-xs-10 col-xs-offset-1">
            <h3 class="text-center">This will scale down proportionately.</h3>
        </li>
        <li class="col-md-3 col-md-offset-0 col-xs-10 col-xs-offset-1 text-center">
            <a href="" class="center-block btn btn-default btn-lg btn-huge lato animate slideInRight">Responsive Design</a>
        </li>
    </ul>
</section>
-->
<section class="container-fluid" id="section7">
    <div class="row">
        <!--fontawesome icons-->
        <div class="col-sm-1 col-sm-offset-3 col-xs-4 text-center">
            <i class="fa fa-github fa-4x"></i>
        </div>
        <div class="col-sm-1 col-xs-4 text-center">
            <i class="fa fa-foursquare fa-4x"></i>
        </div>
        <div class="col-sm-1 col-xs-4 text-center">
            <i class="fa fa-pinterest fa-4x"></i>
        </div>
        <div class="col-sm-1 col-xs-4 text-center">
            <i class="fa fa-google-plus fa-4x"></i>
        </div>
        <div class="col-sm-1 col-xs-4 text-center">
            <i class="fa fa-twitter fa-4x"></i>
        </div>
        <div class="col-sm-1 col-xs-4 text-center">
            <i class="fa fa-dribbble fa-4x"></i>
        </div>
    </div>
</section>

<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-3 column">
                <h4>Information</h4>
                <ul class="nav">
                    <li><a href="about-us.html">Products</a></li>
                    <li><a href="about-us.html">Services</a></li>
                    <li><a href="about-us.html">Benefits</a></li>
                    <li><a href="elements.html">Developers</a></li>
                </ul>
            </div>
            <div class="col-xs-6 col-md-3 column">
                <h4>Follow Us</h4>
                <ul class="nav">
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google+</a></li>
                    <li><a href="#">Pinterest</a></li>
                </ul>
            </div>
            <div class="col-xs-6 col-md-3 column">
                <h4>Contact Us</h4>
                <ul class="nav">
                    <li><a href="#">Email</a></li>
                    <li><a href="#">Headquarters</a></li>
                    <li><a href="#">Management</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </div>
            <div class="col-xs-6 col-md-3 column">
                <h4>Customer Service</h4>
                <ul class="nav">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Delivery Information</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                </ul>
            </div>
        </div>
        <!--/row-->
        <p class="text-right">©2015</p>
    </div>
</footer>

<div class="scroll-up">
	<a href="#"><i class="fa fa-angle-up"></i></a>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 class="text-center"><img src="http://placehold.it/110" class="img-circle"><br>Login</h2>
            </div>
            <div class="modal-body row">
                <h6 class="text-center">COMPLETE THESE FIELDS TO SIGN UP</h6>
                <form class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0">
                    <div class="form-group">
                        <input type="text" class="form-control input-lg" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-lg" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-danger btn-lg btn-block">Sign In</button>
                        <span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <h6 class="text-center"><a href="">Privacy is important to us. Click here to read why.</a></h6>
            </div>
        </div>
    </div>
</div>
    <!--scripts loaded here-->
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <script src="js/scripts.js"></script>
  </body>
</html>